<template>
 <div>
  <BasicForm @register="registerForm">
    <template #email="{ model, field }">
      <span>{{ model[field] }}</span>
    </template>

    <template #verifyCode="{ model, field }">
      <a-row :gutter="8">
        <a-col :sm="14" :md="14" :lg="14" :xl="14">
          <a-input v-model:value="model[field]" class="input-verify-code" placeholder="请输入验证码" />
        </a-col>
        <a-col :sm="8" :md="8" :lg="8" :xl="8">
          <a-button type="primary" style="width: 100%" @click="handleSend" :disabled="disabled">{{ butName }}</a-button>
        </a-col>
      </a-row>
    </template>
  </BasicForm>
  <ManMachineVerifyModal @register="registerManMachineVerifyModal" @submit="handleManMachineVerifySuccess"/>
 </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, provide, watch, nextTick } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { emailFormSchema } from './verify.data';
import { useUserStore } from '/@/store/modules/user';
import { TaskCode } from '/@/api/sys/model/msgPushModel';
import { useSendCaptchaMsg } from './useSendCaptchaMsg'
import ManMachineVerifyModal from './ManMachineVerifyModal.vue';

// 声明Emits
const emit = defineEmits(['register']);
const userStore = useUserStore();

const formData = ref({})
provide('verifyData', formData);
//表单配置
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  schemas: emailFormSchema,
  labelWidth: '90px',
  showActionButtonGroup: false
});

const props = defineProps({
  bizType: {require: false, type: String},
  verifyType: {require: true, type: String},
  toUser: {require: false, type: String},
  // 接口参数
  apiParams: {require: false, type: Object},
  // 发送验证码接口
  api: {require: false, type: Function},
})

onMounted(async () => {
  await resetFields()
  await setFieldsValue({email: props.toUser || userStore.getUserInfo.email})
})

watch(
  () => props.toUser,
  () => {
    nextTick(async () => {
      await setFieldsValue({email: props.toUser || userStore.getUserInfo.email})
    });
  },
  {
    immediate: true,
  }
);

const { 
  handleSend, butName, disabled, verifyInfo,
  registerManMachineVerifyModal, handleManMachineVerifySuccess
} = useSendCaptchaMsg({ 
  taskCode: TaskCode.VERIFY_EMAIl, bizType: props.bizType,
  apiParams: ref(props.apiParams),
  api: props.api
})

const getData = async () => {
  let values = await validate()
  return { 
    verifyCode: values.verifyCode, 
    ...verifyInfo
  }
} 

defineExpose({ getData, verifyType: props.verifyType })

</script>

<style>


</style>